﻿<Page
    x:Class="Cookbook.Views.RecipesView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Cookbook.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:vm="using:Cookbook.ViewModels"
    mc:Ignorable="d"
    d:DataContext="{d:DesignInstance Type=vm:RecipesViewModel}">
  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid.RowDefinitions>
      <RowDefinition Height="140" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <TextBlock Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" 
                   IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" 
                   Margin="120,0,30,40"/>

    <SemanticZoom Grid.Row="1" Margin="120,0,0,0">
      <SemanticZoom.ZoomedInView>
        <GridView ItemsSource="{Binding RecipesGrouped.View}">
          <GridView.ItemTemplate>
            <DataTemplate>
              <Image Source="{Binding ImagePath}" Width="300" Height="300" Stretch="UniformToFill">
                <interactivity:Interaction.Behaviors>
                  <core:EventTriggerBehavior EventName="Tapped">
                    <core:NavigateToPageAction TargetPage="Cookbook.Views.RecipeDetailView"
                                                          Parameter="{Binding Id}" />
                  </core:EventTriggerBehavior>
                </interactivity:Interaction.Behaviors>
              </Image>
            </DataTemplate>
          </GridView.ItemTemplate>
          <GridView.GroupStyle>
            <GroupStyle>
              <GroupStyle.HeaderTemplate>
                <DataTemplate>
                  <TextBlock Text="{Binding Key}" FontSize="48" />
                </DataTemplate>
              </GroupStyle.HeaderTemplate>
            </GroupStyle>
          </GridView.GroupStyle>
          <GridView.ItemsPanel>
            <ItemsPanelTemplate>
              <ItemsWrapGrid GroupPadding="0,0,50,0" />
            </ItemsPanelTemplate>
          </GridView.ItemsPanel>
        </GridView>
      </SemanticZoom.ZoomedInView>
      <SemanticZoom.ZoomedOutView>
        <GridView ItemsSource="{Binding RecipesGrouped.View.CollectionGroups}" >
          <GridView.ItemTemplate>
            <DataTemplate>
              <TextBlock Text="{Binding Group.Key}" />
            </DataTemplate>
          </GridView.ItemTemplate>
          <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
              <Setter Property="Width" Value="100" />
              <Setter Property="Height" Value="100" />
              <Setter Property="Foreground" Value="White" />
              <Setter Property="Background" Value="DarkGray" />
              <Setter Property="FontSize" Value="60" />
              <Setter Property="HorizontalAlignment" Value="Center" />
            </Style>
          </GridView.ItemContainerStyle>
        </GridView>
      </SemanticZoom.ZoomedOutView>
    </SemanticZoom>
    

  </Grid>
</Page>
